import { ref, watchEffect } from 'vue'
import { getActiveThemeName, setActiveThemeName } from '@/utils/cache/local-storage'
const DEFAULT_THEME_NAME = 'normal'
//这里不是很懂
type DefaultThemeName = typeof DEFAULT_THEME_NAME

export type ThemeName = DefaultThemeName | 'dark'

interface ThemeList {
  title: string
  name: ThemeName
}
// 主题列表
const themeList: ThemeList[] = [
  {
    title: '默认',
    name: DEFAULT_THEME_NAME
  },
  {
    title: '暗黑',
    name: 'dark'
  }
]
//正在应用的主题
const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)

//在html根元素上挂在class
// document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素
const setHtmlRootClassName = (value: ThemeName) => {
  document.documentElement.className = value
}

// 设置主题(只改变了变量activeThemeName)
const setTheme = (value: ThemeName) => {
  activeThemeName.value = value
}

//初始化
// watchEffect 不需要指定需要监听的数据，而是会根据回调函数中的代码来自动判断，
// 如果回调函数中用到了响应性数据， 无论回调函数中有多好个，只要数据发生了变化 watchEffect 就会重新执行一次，
// watch 是数据变化了才监听，
//注意这里要使用才能监听到改变
export const initTheme = () => {
  //收集副作用
  watchEffect(() => {
    const value = activeThemeName.value
    setHtmlRootClassName(value)
    setActiveThemeName(value)
  })
}
//主题hook
export function useTheme() {
  return { themeList, activeThemeName, initTheme, setTheme }
}
